<template>
  <div class="app-container">
    <!--账单管理-全部订单-->
    <div class="top">
      <h5 class="title">全部订单</h5>
      <div class="nav">
        <div>
          <el-button v-for="(item,index) in btnStr" :key="'bloc'+index" type="primary" round style="width: 100px;height: 32px;margin-right: 10px">
            {{ item }}
          </el-button>
        </div>
        <el-input
          style="width: 320px;height: 36px;margin-right: 10px;"
          placeholder="销售姓名、诊所名称、患者姓名、医生姓名"
        >
        </el-input>
      </div>
      <div class="nav">
        <el-input
          v-for="(item,index) in iptStyle"
          :key="index"
          style="width: 200px;height: 36px;margin-right: 10px;"
          :placeholder="item.str"
          :suffix-icon="item.icon"
        >
        </el-input>
        <el-button type="primary" round style="width: 120px;height: 32px;">搜索</el-button>
      </div>
      <div class="nav">
        <el-input
          v-for="(item,index) in iptStyle1"
          :key="index"
          style="width: 200px;height: 36px;margin-right: 10px;"
          :placeholder="item.str"
          :suffix-icon="item.icon"
        >
        </el-input>
        <el-date-picker style="width:200px;height: 36px;margin-right: 10px;display:inline-block;" type="date" placeholder="账单生成日期" suffix-icon="el-icon-date"></el-date-picker>
        <el-date-picker style="width:200px;height: 36px;margin-right: 10px;display:inline-block;" type="date" placeholder="开票日期" suffix-icon="el-icon-date"></el-date-picker>
        <el-date-picker style="width:200px;height: 36px;margin-right: 10px;display:inline-block;" type="date" placeholder="账单生成日期" suffix-icon="el-icon-date"></el-date-picker>
        <el-button type="primary" round style="width: 120px;height: 32px;">导出</el-button>
      </div>
    </div>
    <div class="center">
      <span>本期共2个待核对账单</span>
      <span>共计: 222000</span>
    </div>
    <div class="bottom">
      <el-table ref="table" :data="tableData" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" width="159" label="序号"></el-table-column>
        <el-table-column prop="salesId" width="159" label="所属连锁"></el-table-column>
        <el-table-column prop="orgType" width="159" label="直营/代理"></el-table-column>
        <el-table-column prop="areaId" width="159" label="所属区域"></el-table-column>
        <el-table-column prop="salesId" width="159" label="所属销售"></el-table-column>
        <el-table-column prop="clinicType" width="159" label="诊所性质"></el-table-column>
        <el-table-column prop="proCode" width="159" label="省份"></el-table-column>
        <el-table-column prop="cityCode" width="159" label="城市"></el-table-column>
        <el-table-column prop="clinicName" width="159" label="诊所名称"></el-table-column>
        <el-table-column prop="patientCreateDate" width="159" label="病例提交日期"></el-table-column>
        <el-table-column prop="patientName" width="159" label="患者姓名"></el-table-column>
        <el-table-column prop="patientId" width="159" label="患者编号"></el-table-column>
        <el-table-column prop="doctorName" width="159" label="医生"></el-table-column>
        <el-table-column prop="subOrderfirstCreateDate" width="159" label="首副确认日期"></el-table-column>
        <el-table-column prop="packageInfoName" width="159" label="套餐"></el-table-column>
        <el-table-column prop="stage" width="159" label="病例阶段"></el-table-column>
        <el-table-column prop="orderAmount" width="159" label="费用"></el-table-column>
        <el-table-column prop="priceSpreadAmount" width="159" label="调整金额"></el-table-column>
        <el-table-column prop="priceSpreadRemark" width="159" label="调整说明"></el-table-column>
        <el-table-column prop="settleAmount" width="159" label="实付金额"></el-table-column>
        <el-table-column prop="patientRemark" width="159" label="特殊病例备注"></el-table-column>
        <el-table-column prop="settleRemark" width="159" label="账款问题备注"></el-table-column>
        <el-table-column prop="accStat" width="159" label="对账状态"></el-table-column>
        <el-table-column prop="accCreateDate" width="159" label="账单生成日期"></el-table-column>
        <el-table-column prop="invoiceStat" width="159" label="开票状态"></el-table-column>
        <el-table-column prop="invoiceDate" width="159" label="开票日期"></el-table-column>
        <el-table-column prop="payDate" width="159" label="付款日期"></el-table-column>
        <el-table-column prop="blocId" width="159" label="破损矫治器申请记录"></el-table-column>
        <el-table-column prop="blocId" width="159" label="制作详情">
          <template slot-scope="scope">
            <el-button type="primary" round style="width: 120px;height: 32px;" @click="toDetail(scope)">疗程内详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { orderAccPage } from '@/api/oper';
import { getDictMap } from '@/api/system/dictDetail';
const dict = ['express_stat', 'order_stat', 'order_sub_stat', 'order_treat_stage', 'gender', 'sub_order_treat_stage']

export default {
  data() {
    return {
      btnStr: ['生成账单', '未提交', '暂不开票', '反记'],
      iptStyle: [
        {
          str: '对账状态',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '开票状态',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '回款状态',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '所属机构/集团',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '所属代理',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '所属销售',
          icon: 'el-icon-arrow-down'
        }
      ],
      iptStyle1: [
        {
          str: '诊所名称',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '诊所性质',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '所属区域',
          icon: 'el-icon-arrow-down'
        },
      ],
      tableData: []
    };
  },
  created() {
    orderAccPage().then(res => {
      this.tableData = res.content;
    });
    dict.forEach(item => {
      getDictMap(item).then((e) => {
        console.log(e, 'eee')
        this.item = e.package_rule
      });
    })
  },
  methods: {
    // 疗程内详情
    toDetail(info) {
      console.log(info)
    }
  }
};
</script>

<style scoped>
    .top {
      height: 210px;
    }
    .top .title {
      margin: 0 0 20px;
      font-size: 30px;
      color: #02a7f0;
    }

    .nav {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }

    .center {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
    }

    .bottom {
      margin-top: 10px;
    }
</style>
